﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd" status="Out Of Date">
  <title translate="true">Catel.Extensions.Rx</title>
  <keywords>
    <keyword translate="true">Reactive extensions</keyword>
    <keyword translate="true">Reactive Extensions (Rx)</keyword>
    <keyword translate="true">ReactiveViewModelBase</keyword>
    <keyword translate="true">Rx</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Catel.Extensions.Rx</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Starting with Catel 3.1, an extension is available for </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://www.reactiveui.net/" target="_blank" styleclass="Normal" translate="true">Reactive Extensions (Rx)</link><text styleclass="Normal" translate="true">. This extension allows you to use the full potential of Catel in combination with Reactive Extensions.</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Using view models</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To use the view models that support Reactive Extensions, the only thing you have to do is reference the </text><text styleclass="Normal" style="font-style:italic;" translate="true">Catel.Extensions.Rx</text><text styleclass="Normal" style="font-style:normal;" translate="true"> library (via NuGet), then derive a view model from the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_MVVM_ReactiveViewModelBase" styleclass="Normal" style="font-style:normal;" translate="true">ReactiveViewModelBase</link><text styleclass="Normal" style="font-style:normal;" translate="true"> like shown below:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">class</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">MyViewModel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">:</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">ReactiveViewModelBase</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">   </text><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">// TODO: Add your view model code here</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">}</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Using commands</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Reactive Extensions use their own commands. However, a </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_MVVM_Command" styleclass="Normal" translate="true">Command</link><text styleclass="Normal" translate="true"> in Catel can easily be converted to a Reactive Extensions command using an extension method:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">var</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">reactiveCommand</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">MyCatelCommand.ConvertToReactiveCommand();</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">Looking for more feature combinations with Reactive Extensions? Let us know!</text></para>
  </body>
</topic>
